<template>
  <div>
    <jxf-titletip :title="title" :hasRefresh="false" :hasGoBack="active === 2" @goBack="goBack"></jxf-titletip>

    <transition name="el-zoom-in-top">
      <div v-show="active === 1">
        <el-card class="mt20">
          <h3>说明</h3>
          <h4 class="mt10">选择供应商进行商品批量导入，选择供应商后下载批量上传的Excel模板并进行编辑，编辑后即可上传。</h4>
        </el-card>
        <el-card class="mt20">
          <h4 class="list-title">选择供应商</h4>
          <ChooseSupplier @nextStep1="nextStep1"></ChooseSupplier>
        </el-card>
      </div>
    </transition>
    <div v-show="active === 2">
      <el-card class="mt20">
        <h4>说明</h4>
        <p style="font-size: 14px;line-height: 1.8; margin-top: 10px;">
          1. 下载集鲜丰准备的专用Excel表格模板<br>

          2. 在Excel表格中依据格式和相关规定填写需要上传商品的信息（有标注的表头为必填项目哦）<br>

          3. 填写完成的Excel进行保存（要记住保存在哪哦）<br>

          4. 在当前页面点击【批量上传商品】按钮，找到并选择保存的Excel进行上传<br>

          5. 上传完毕后，集鲜丰将展示所有上传的商品信息，为了防止错误可以再次检查和编辑哦~<br>

          6. 检查无误后，点击保存即可完成商品的批量上传，并立马上架<br>
        </p>
      </el-card>
      <el-card class="mt20 bg-gray">
        <el-row :gutter="20" type="flex" justify="start">
          <el-col :span="6">
            <el-button type="primary" size="small" @click="downloadExcel">下载模板</el-button>
          </el-col>
          <el-col :span="6">
            <el-upload
              :action="uploadUrl"
              :data="info"
              :headers="header"
              :file-list="fileList"
              :before-upload="beforeUpload"
              :on-success="uploadSuccess" :on-error="uploadError">
              <el-button size="small" type="primary" :loading="uploadLoading">批量上传商品</el-button>
            </el-upload>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div v-show="active === 3">
      <el-card class="mt20 text-center">
        <i></i>
        <h2>操作成功</h2>
        <p class="mt20 c-gray">
          商品添加成功 <span class="c-base">{{resultInfo.succeedData}}</span> 个 失败 <span
          class="c-base">{{resultInfo.errorData}}</span> 个
          <el-button v-if="resultInfo.errorData > 0" type="text" @click="exportInfo" :loading="exportLoading">下载上传失败商品表格</el-button>
        </p>
        <div class="mt20">
          <router-link :to="'/productList'"><span class="c-base">返回商品列表</span></router-link>
          <el-button class="ml20" type="text" @click="goToImport">继续导入</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import ChooseSupplier from './components/ChooseSupplier'
  import ChooseClassify from './components/ChooseClassify'
  import AddProductInfoForm from './components/AddProductInfoForm'

  export default {
    name: "ImportProduct",
    components: {ChooseSupplier, ChooseClassify, AddProductInfoForm},
    data() {
      return {
        title: "批量导入-选择供应商",
        active: 1,
        info: {
          supplyId: null
        },
        uploadUrl: apis.product.uploadProductList,
        header: {},
        fileList:[],
        resultInfo: {
          succeedData:'',
          errorData:''
        },
        exportLoading:false,
        uploadLoading:false
      }
    },
    methods: {
      init() {
        let token = window.localStorage.adminLogin ? JSON.parse(window.localStorage.adminLogin).token : ""
        this.header = {token: token}
      },
      nextStep1(id) {
        this.info.supplyId = id
        this.title = "批量导入"
        this.active = 2
      },
      downloadExcel() {
        window.location.href = "https://jxf-images.oss-cn-shanghai.aliyuncs.com/product/%E5%95%86%E5%93%81%E6%89%B9%E9%87%8F%E5%AF%BC%E5%85%A5%E6%A8%A1%E7%89%88.xlsx"
      },
      beforeUpload(){
        this.uploadLoading = true
      },
      uploadSuccess(res) {
        this.uploadLoading = false
        if(res.success){
          this.title = "上传成功"
          this.active = 3
          this.resultInfo = res.data
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      },
      uploadError(res) {
        this.uploadLoading = false
        this.$message({
          message: res.message,
          type: 'error'
        })
      },
      goToImport() {
        // 上传列表置空
        this.fileList = []
        this.title = "批量导入-选择供应商"
        this.active = 1
      },
      // 下载上传失败商品表格
      exportInfo() {
        this.exportLoading = true
        ajax.export(apis.product.exportErrorProductList, {userId:this.resultInfo.userId})
          .then(res => {
            this.exportLoading = false
          }).catch(res => {
          this.$message({
            type: "error",
            message: res
          })
        })
      },
      goBack() {
        this.active = 1;
      }
    },
    created() {
      this.init()
    }
  }
</script>

<style lang="scss">
  .mt10 {
    margin-top: 10px;
  }
</style>
